<template>
  <div>
    <!-- 添加或修改班级信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="课程名称" prop="className">
          <el-input v-model="form.className" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item label="课程类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择课程类型">
            <el-option
              v-for="dict in dict.type.sc_class_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入课程价格" />
        </el-form-item>
        <el-form-item label="课程简述">
          <el-input v-model="form.remarks" placeholder="请输入课程简述" />
        </el-form-item>
        <el-form-item label="课程图片">
          <imageUpload v-model="form.image" :limit="1"/>
        </el-form-item>
        <el-form-item label="课程描述">
          <editor v-model="form.remarks2" :min-height="192"/>
        </el-form-item>
         <el-form-item label="课程状态" prop="state">
          <el-select v-model="form.state" placeholder="请选择课程状态">
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
     
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addClass, updateClass, getCourseByName } from "@/api/school/class";
export default {
  dicts: ["sc_class_type","sys_normal_disable"],
  data() {
    return {
      title: '',
      // 是否显示弹出层
      open: false,
      classList: [],
      loading: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        className: [
          { required: true, message: "课程名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择课程类型", trigger: "blur" }],
        price: [{ required: true, message: "请输入课程价格", trigger: "blur" }],
        state: [{ required: true, message: "请输入课程状态", trigger: "blur" }],
      },
    };
  },
  methods: {
    remoteMethod(query) {
      getCourseByName({name: query}).then(res => {
        console.log(res)
        this.classList = res.data
      })
    },
      // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        className: null,
        type: null,
        price: null,
        image: null,
        remarks: null,
        teacherId: null
      };
      this.resetForm("form");
    },
      /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateClass(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('updatedata')
            });
          } else {
            addClass(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('updatedata')
            });
          }
        }
      });
    },
  }
};
</script>

<style>
</style>